{include file="common/public/header"}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 5px;
        letter-spacing: 1px;
    }

    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 1);
    }

    .store-total-container .store-total-item {
        color: #fff;
        line-height: 3em;
        padding: 8px 25px;
        position: relative;
    }

    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 42px;
        line-height: 42px;
    }

    .button-group {
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

    .log-summary {
        display: flex;
        justify-content: space-between;
    }

    .layui-card .layui-tab-brief .layui-tab-title li.layui-this {
        color: #f30 !important;
    }

    .layui-tab-title .layui-this:after {
        border: none;
    }

    .content {
        padding: 0 16px 0 16px;
    }

    .li-list {
        height: 35px;
        /*     border-bottom: 1px solid #e0e0e0;*/
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .li-item {
        display: flex;
        cursor: pointer;
    }

    .li-item-read {
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 35px;
        color: #7a7a7a;
    }

    .li-time {
        font-family: Lato;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 64px;
        color: #7a7a7a;
    }

    .layui-card-header {
        padding: 0 30px;
        font-weight: 700;
        font-size: 15px;
    }
</style>
<div class="layui-fluid">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日总收入
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">￥0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日充值笔数
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日新增用户数
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日新增关注人数
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日新用户充值人数
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-card-header">
                        今日新用户充值金额
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <div class="layui-card-body layuiadmin-card-list">
                                <p class="layuiadmin-big-font">0</p>
                                <p style="border-top: 1px solid #e0e0e0;height: 50px;line-height: 50px;">
                                    昨日全天 0
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            充值统计
                        </div>
                        <div id="statistics"
                             style="display: inline-block;width: 100%;height:300px;padding: 30px 0;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row ">
        <div class="layui-col-md9">

        </div>
    </div>
</div>

{include file="common/public/footer" /}
<!--新-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!--老-->
<!--<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    layui.use(['laypage', 'layer', 'form'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //弹窗
        $('.li-item-read').on('click', function () {
            $.ajax({
                url: "advertisement_details",
                type: "post",
                data: {id: $(this).attr("id")},
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    if (result.code == 1) {
                        //示范一个公告层
                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false
                            ,
                            area: ['600px', '800px']
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            btn: ['关闭']
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            title: '<div style="text-align: center;font-size: 17px;font-weight: 700;">' + result.data.title + '</div>'
                            ,
                            content: '<div style="padding: 30px; line-height: 22px; font-weight: 300;">' + result.data.content + '</div>'
                            ,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    target: '_blank'
                                });
                            }
                        });
                    } else {
                        layer.msg("不好意思，失败了...")
                    }
                }
            });
        });

    });
    var statistics = echarts.init(document.getElementById('statistics'));
    //首次进入渲染数据
    search();
    //搜索
    function search() {
        $.ajax({
            type: 'POST',
            url: "../../api/statistics/recharge_statistics",
            data: {
/*                date: $('#search-date').val(),
                type: 'd'*/
            },
            async: false,
            dataType: 'json',
            success: function (data) {
                output(data)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
        });
    }
    // 指定图表的配置项和数据
    function output(data) {
        var nodes = [];
        for (var i=0;i<data.count.length;i++){
            var vote = {
                value: data.count[i], name: data.count[i]
            }
            nodes.push(vote);
        }

        var lineoption = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['总收入', '新增用户数', '新增关注人数', '新用户充值人数', '新用户充值金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.week
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                }
            ],
            series: [
                {
                    name: '总收入',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '新增用户数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '新增关注人数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '新用户充值人数',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },{
                    name: '新用户充值金额',
                    type: 'line',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        statistics.setOption(lineoption);


    }



    //跳转地址
    function jump_url(url) {
        open_frame(url, '', eval("['90%', '90%']"));
    }
</script>


